<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>知识库管理</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .filters { display: flex; gap: 10px; background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter { min-width: 150px; }
        .filter select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
        .search-bar { flex: 1; max-width: 500px; }
        .search-bar input { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
        .articles-list { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
        .article { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .article-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
        .article-title { font-weight: bold; font-size: 16px; }
        .category-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .category-technical { background-color: #e3f2fd; color: #0d47a1; }
        .category-usage { background-color: #fff8e1; color: #ff6f00; }
        .category-faq { background-color: #e8f5e9; color: #2e7d32; }
        .article-meta { margin: 10px 0; font-size: 14px; color: #666; }
        .article-summary { margin: 10px 0; }
        .article-actions { display: flex; gap: 10px; margin-top: 10px; }
        .btn { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: #1976d2; color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-success { background-color: #388e3c; color: white; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: white; margin: 10% auto; padding: 20px; width: 50%; border-radius: 8px; }
        .modal-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
        .modal-title { font-size: 18px; font-weight: bold; }
        .close { cursor: pointer; font-size: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>知识库管理</h1>
                <button class="btn btn-primary" onclick="openModal('createArticleModal')">添加文章</button>
            </div>
            
            <div class="filters">
                <div class="search-bar">
                    <input type="text" placeholder="搜索知识库...">
                </div>
                <div class="filter">
                    <select id="categoryFilter">
                        <option value="">所有分类</option>
                        <option value="technical">技术</option>
                        <option value="usage">使用指南</option>
                        <option value="faq">常见问题</option>
                    </select>
                </div>
                <div class="filter">
                    <select id="productFilter">
                        <option value="">所有产品</option>
                        <option value="crm">CRM核心</option>
                        <option value="sales">销售模块</option>
                        <option value="support">支持模块</option>
                    </select>
                </div>
            </div>
            
            <div class="articles-list">
                <!-- 文章示例 -->
                <div class="article">
                    <div class="article-header">
                        <div class="article-title">设置用户权限</div>
                        <div class="category-badge category-technical">技术</div>
                    </div>
                    <div class="article-meta">
                        <div>更新时间: 2023年5月15日</div>
                        <div>阅读量: 1,245</div>
                    </div>
                    <div class="article-summary">
                        本指南解释如何设置和管理CRM系统中的用户权限，以控制对不同模块和功能的访问。
                    </div>
                    <div class="article-actions">
                        <button class="btn btn-primary" onclick="openModal('viewArticleModal')">查看</button>
                        <button class="btn btn-secondary" onclick="openModal('editArticleModal')">编辑</button>
                        <button class="btn btn-secondary" onclick="confirmDelete(1)">删除</button>
                    </div>
                </div>
                
                <div class="article">
                    <div class="article-header">
                        <div class="article-title">管理销售机会</div>
                        <div class="category-badge category-usage">使用指南</div>
                    </div>
                    <div class="article-meta">
                        <div>更新时间: 2023年5月10日</div>
                        <div>阅读量: 987</div>
                    </div>
                    <div class="article-summary">
                        了解如何通过销售流程有效跟踪和管理销售机会，以提高转化率。
                    </div>
                    <div class="article-actions">
                        <button class="btn btn-primary" onclick="openModal('viewArticleModal')">查看</button>
                        <button class="btn btn-secondary" onclick="openModal('editArticleModal')">编辑</button>
                        <button class="btn btn-secondary" onclick="confirmDelete(2)">删除</button>
                    </div>
                </div>
                
                <div class="article">
                    <div class="article-header">
                        <div class="article-title">常见登录问题</div>
                        <div class="category-badge category-faq">常见问题</div>
                    </div>
                    <div class="article-meta">
                        <div>更新时间: 2023年4月28日</div>
                        <div>阅读量: 2,561</div>
                    </div>
                    <div class="article-summary">
                        关于登录问题、密码重置和账户访问问题的常见问题解答。
                    </div>
                    <div class="article-actions">
                        <button class="btn btn-primary" onclick="openModal('viewArticleModal')">查看</button>
                        <button class="btn btn-secondary" onclick="openModal('editArticleModal')">编辑</button>
                        <button class="btn btn-secondary" onclick="confirmDelete(3)">删除</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 创建文章模态框 -->
        <div id="createArticleModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">添加新文章</div>
                    <span class="close" onclick="closeModal('createArticleModal')">&times;</span>
                </div>
                <form id="createArticleForm">
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" id="title" required>
                    </div>
                    <div class="form-group">
                        <label for="category">分类</label>
                        <select id="category" required>
                            <option value="">选择分类</option>
                            <option value="technical">技术</option>
                            <option value="usage">使用指南</option>
                            <option value="faq">常见问题</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="product">相关产品</label>
                        <select id="product" required>
                            <option value="">选择产品</option>
                            <option value="crm">CRM核心</option>
                            <option value="sales">销售模块</option>
                            <option value="support">支持模块</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="summary">摘要</label>
                        <textarea id="summary" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea id="content" rows="10" required></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('createArticleModal')">取消</button>
                        <button type="submit" class="btn btn-primary">创建文章</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 查看文章模态框 -->
        <div id="viewArticleModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">设置用户权限</div>
                    <span class="close" onclick="closeModal('viewArticleModal')">&times;</span>
                </div>
                <div class="article-category category-badge category-technical">技术</div>
                <div class="article-meta">
                    <div>更新时间: 2023年5月15日</div>
                    <div>阅读量: 1,245</div>
                </div>
                <div class="article-content" style="margin-top: 20px; line-height: 1.6;">
                    <p>本指南解释如何在CRM系统中设置和管理用户权限。</p>
                    
                    <h3>了解权限级别</h3>
                    <p>CRM系统提供三个主要权限级别：</p>
                    <ul>
                        <li><strong>管理员：</strong>对所有系统功能和设置的完全访问权限</li>
                        <li><strong>经理：</strong>可以访问大多数功能，但系统配置选项有限</li>
                        <li><strong>用户：</strong>对日常CRM功能的基本访问权限</li>
                    </ul>
                    
                    <h3>设置用户角色</h3>
                    <p>创建新用户角色的步骤：</p>
                    <ol>
                        <li>导航到 设置 > 用户管理</li>
                        <li>点击 "角色与权限"</li>
                        <li>点击 "添加新角色"</li>
                        <li>输入角色名称和描述</li>
                        <li>为每个模块选择适当的权限</li>
                        <li>点击 "保存"</li>
                    </ol>
                    
                    <h3>分配角色给用户</h3>
                    <p>为用户分配角色的步骤：</p>
                    <ol>
                        <li>导航到 设置 > 用户管理</li>
                        <li>选择要修改的用户</li>
                        <li>点击 "编辑用户"</li>
                        <li>从 "角色" 下拉菜单中选择适当的角色</li>
                        <li>点击 "保存更改"</li>
                    </ol>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal('viewArticleModal')">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="openModal('editArticleModal')">编辑</button>
                </div>
            </div>
        </div>
        
        <!-- 编辑文章模态框 -->
        <div id="editArticleModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">编辑文章</div>
                    <span class="close" onclick="closeModal('editArticleModal')">&times;</span>
                </div>
                <form id="editArticleForm">
                    <div class="form-group">
                        <label for="editTitle">标题</label>
                        <input type="text" id="editTitle" value="设置用户权限" required>
                    </div>
                    <div class="form-group">
                        <label for="editCategory">分类</label>
                        <select id="editCategory" required>
                            <option value="technical" selected>技术</option>
                            <option value="usage">使用指南</option>
                            <option value="faq">常见问题</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editProduct">相关产品</label>
                        <select id="editProduct" required>
                            <option value="crm" selected>CRM核心</option>
                            <option value="sales">销售模块</option>
                            <option value="support">支持模块</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editSummary">摘要</label>
                        <textarea id="editSummary" rows="3" required>本指南解释如何设置和管理CRM系统中的用户权限，以控制对不同模块和功能的访问。</textarea>
                    </div>
                    <div class="form-group">
                        <label for="editContent">内容</label>
                        <textarea id="editContent" rows="10" required>本指南解释如何在CRM系统中设置和管理用户权限。

了解权限级别
CRM系统提供三个主要权限级别：
- 管理员：对所有系统功能和设置的完全访问权限
- 经理：可以访问大多数功能，但系统配置选项有限
- 用户：对日常CRM功能的基本访问权限

设置用户角色
创建新用户角色的步骤：
1. 导航到 设置 > 用户管理
2. 点击 "角色与权限"
3. 点击 "添加新角色"
4. 输入角色名称和描述
5. 为每个模块选择适当的权限
6. 点击 "保存"

分配角色给用户
为用户分配角色的步骤：
1. 导航到 设置 > 用户管理
2. 选择要修改的用户
3. 点击 "编辑用户"
4. 从 "角色" 下拉菜单中选择适当的角色
5. 点击 "保存更改"</textarea>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" onclick="closeModal('editArticleModal')">取消</button>
                        <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            // 模态框处理
            function openModal(modalId) {
                document.getElementById(modalId).style.display = 'block';
            }
            
            function closeModal(modalId) {
                document.getElementById(modalId).style.display = 'none';
            }
            
            // 删除确认
            function confirmDelete(id) {
                if (confirm('确定要删除这篇文章吗？')) {
                    console.log('删除文章ID:', id);
                    // 在此实现删除逻辑
                }
            }
            
            // 表单提交
            document.getElementById('createArticleForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理文章创建
                closeModal('createArticleModal');
            });
            
            document.getElementById('editArticleForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 处理文章更新
                closeModal('editArticleModal');
            });
            
            // 过滤器处理
            document.getElementById('categoryFilter').addEventListener('change', filterArticles);
            document.getElementById('productFilter').addEventListener('change', filterArticles);
            
            function filterArticles() {
                // 在此实现过滤逻辑
                console.log('过滤文章...');
            }
        </script>
    </th:block>
</body>
</html> 